<!DOCTYPE html>
<html>
<head>

    {% include 'public/header.phtml' %}

    <title>ICLOCK-CMS</title>

</head>
<body id="app" class="app off-canvas">


{% include 'public/top.phtml' %}


<!-- main-container -->
<div class="main-container clearfix">


    {% include 'public/left.phtml' %}
    <!-- content-here -->
    <div class="content-container" id="content">
        <div class="page page-forms-elements">

            <ol class="breadcrumb breadcrumb-small">
                <li>文章</li>
                <li class="active"><a href="forms.elements.html">列表</a></li>
            </ol>

            <div class="page-wrap">
                <!-- row -->
                <div class="row">

                    <!-- col-left -->
                    <div class="col-md-12">
                        <div class="panel panel-lined table-responsive panel-hovered mb20 data-table" style="padding-bottom: 20px">
                            <div class="panel-body">

                                <div class="small text-bold left mt5">
                                    显示&nbsp;
                                    <select class="lengthSelect">
                                        <option value="5">5</option>
                                        <option value="10" selected>10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                    &nbsp;条数据
                                    <a href="/article/add" class="btn btn-line-success btn-rounded waves-effect ml30 btn-sm">新增文章</a>
                                </div>

                                <form class="form-horizontal right col-lg-4" action="javascript:;">
                                    <input type="text" class="form-control input-sm searchInput" placeholder="Type keyword">
                                </form>
                            </div>
                            <!-- data table -->
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>
                                        标题
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        作者
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        关键词
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        是否显示
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        添加时间
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                    <th>
                                        操作
                                        <div class="th">
                                            <i class="fa fa-caret-up icon-up"></i>
                                            <i class="fa fa-caret-down icon-down"></i>
                                        </div>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                {% if posts %}
                                    {% for post in posts %}
                                        <tr role="row" class="odd">
                                            <td>{{post.title}}</td>
                                            <td>{{post.author}}</td>
                                            <td>{{post.keywords}}</td>

                                            {% if post.isshow == 0 %}
                                            <td>否</td>
                                            {% else %}
                                            <td>是</td>

                                            {% endif %}

                                            <td>{{ date('Y-m-d H:i:s',post.createtime)}}</td>
                                            <td>
                                                <a href="/article/edit/{{post.id}}" class='btn btn-success waves-effect'>编辑</a>
                                                <a href="javascript:;" class='btn btn-danger waves-effect'>删除</a>
                                            </td>
                                        </tr>
                                    {% endfor %}

                                {% endif %}

                                </tbody>
                            </table>
                            <!-- #end data table -->

                        </div>


                </div>
                <!-- #end row -->

            </div> <!-- #end page-wrap -->
        </div> <!-- #end page -->
    </div> <!-- #end content-container -->

</div> <!-- #end main-container -->


<!-- theme settings -->
<div class="site-settings clearfix hidden-xs">
    <div class="settings clearfix">
        <div class="trigger ion ion-settings left"></div>
        <div class="wrapper left">
            <ul class="list-unstyled other-settings">
                <li class="clearfix mb10">
                    <div class="left small">Nav Horizontal</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox" id="navHorizontal">
                            <span>&nbsp;</span>
                        </label>
                    </div>


                </li>
                <li class="clearfix mb10">
                    <div class="left small">Fixed Header</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox"  id="fixedHeader">
                            <span>&nbsp;</span>
                        </label>
                    </div>
                </li>
                <li class="clearfix mb10">
                    <div class="left small">Nav Full</div>
                    <div class="md-switch right">
                        <label>
                            <input type="checkbox"  id="navFull">
                            <span>&nbsp;</span>
                        </label>
                    </div>
                </li>
            </ul>
            <hr/>
            <ul class="themes list-unstyled" id="themeColor">
                <li data-theme="theme-zero" class="active"></li>
                <li data-theme="theme-one"></li>
                <li data-theme="theme-two"></li>
                <li data-theme="theme-three"></li>
                <li data-theme="theme-four"></li>
                <li data-theme="theme-five"></li>
                <li data-theme="theme-six"></li>
                <li data-theme="theme-seven"></li>
            </ul>
        </div>
    </div>
</div>
<!-- #end theme settings -->




<!-- Dev only -->
{% include 'public/footer.phtml' %}
    <script src="<?=JS_PATH?>jquery.dataTables.min.js"></script>
<!--    <script src="--><?//=JS_PATH?><!--tables.init.js"></script>-->


<script>
$(function () {
    function toggleBasicTableFns() {
        var $btable = $(".data-table"),
            btns = [".btable-bordered", ".btable-striped", ".btable-condensed", ".btable-hover"];
        btns.forEach(function(btn) {
            $btable.find(btn).on("click touchstart", function(e) {
                var tableClass = $(this).data("table-class");
                e.preventDefault(), $(this).toggleClass("active"), $btable.find("table").toggleClass(tableClass)
            })
        })
    }
    toggleBasicTableFns();
})

</script>

</body>
</html>

